<!--  -->
<template>
  <div class="basic-infor">
    <el-form
      size="small"
      ref="formDia"
      :model="formDia"
      class="demo-form-inline"
      label-width="80px"
    >
      <el-form-item label="医保类型">
        <el-select
          v-model="formDia.medicalInsuranceTypeKey"
          placeholder="--请选择--"
          @change="medicalInsuranceTypeChange"
        >
          <el-option
            v-for="item in insuranceType"
            :key="'insuranceType' + item.value"
            :label="item.value"
            :value="item.key"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报销类型">
        <el-select
          v-model="formDia.reimbursementTypeKey"
          @change="reimbursementTypeChange"
          placeholder="请选择"
        >
          <el-option
            v-for="item in reimburType"
            :key="'reimburType' + item.value"
            :label="item.value"
            :value="item.key"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input
          placeholder="请输入姓名"
          v-model="formDia.name"
          clearable
          @blur="onBlur('formDia', 'name')"
          style="width: 180px; margin-right: 10px"
        ></el-input>
        <el-button
          type="danger"
          @click="onReadIDCard"
          icon="el-icon-postcard"
          size="mini"
          >读卡</el-button
        >
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input
          placeholder="请输入身份证号"
          v-model="formDia.idCard"
          clearable
          @blur="onBlur('formDia', 'idCard')"
        ></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input placeholder="请输入年龄" v-model="formDia.age"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="formDia.sex" placeholder="请选择">
          <el-option key="nan" label="男" value="男"> </el-option>
          <el-option key="nv" label="女" value="女"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="总费用">
        <el-input
          placeholder="请输入总费用"
          v-model="formDia.totalCost"
          clearable
          @blur="onBlur('formDia', 'totalCost')"
        ></el-input>
      </el-form-item>
      <el-form-item label="统筹费用">
        <el-input
          placeholder="请输入统筹费用"
          v-model="formDia.coordinatedPayment"
          clearable
          @blur="onBlur('formDia', 'coordinatedPayment')"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="onBack" size="mini">返 回</el-button>
        <el-button type="primary" @click="saveFun(1)" size="mini"
          >保 存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { dictReimburType } from "@/api/index";
import { getInfo, add, editPersonnel } from "@/api/files/basics";
export default {
  components: {},
  props: ["id", "insuranceType"],
  data() {
    return {
      formDia: {
        id: "",
        medicalInsuranceType: "",
        reimbursementType: "",
        medicalInsuranceTypeKey: "",
        reimbursementTypeKey: "",
        name: "",
        idCard: "",
        age: "",
        sex: "男",
        totalCost: 0,
        coordinatedPayment: 0,
      },
      formOrg: {
        id: "",
        medicalInsuranceType: "",
        reimbursementType: "",
        medicalInsuranceTypeKey: "",
        reimbursementTypeKey: "",
        name: "",
        idCard: "",
        age: "",
        sex: "男",
        totalCost: 0, //总费用
        coordinatedPayment: 0, //统筹费用
      },
      loading: false,
      reimburType: null,
    };
  },
  computed: {},
  watch: {
    insuranceType: {
      handler: function () {
        this.getReimburType();
      },
      immediate: true,
    },
  },
  //方法集合
  methods: {
    onBlur(key1, key) {
      this[key1][key] = this[key1][key] ? this[key1][key].trim() : "";
    },
    //报销类型
    getReimburType() {
      let params = {
        medicalInsuranceType: this.formDia.medicalInsuranceType,
      };
      dictReimburType(params).then((res) => {
        if (res.code == 200) {
          this.reimburType = res.data;
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    //更改医保类型
    medicalInsuranceTypeChange() {
      this.formDia.medicalInsuranceType = this.findArrayList(
        this.insuranceType,
        e
      );
      this.getReimburType();
    },
    reimbursementTypeChange() {
      this.formDia.reimbursementType = this.findArrayList(this.reimburType, e);
    },

    findArrayList(arr, key) {
      let value = "";
      for (let i = 0; i < arr.length; i++) {
        if (key == arr[i].key) {
          value = arr[i].value;
          break;
        }
      }
      return value;
    },
    onBack() {
      this.$emit("closeAddFiles", 1);
    },
    onReadIDCard() {
      this.$emit("onReadIDCard");
    },
    setPageOpe() {
      if (this.id) {
        this.getInfoForm();
      }
    },
    getInfoForm() {
      this.loading = true;
      let data = { id: this.id };
      getInfo(data).then((res) => {
        if (res.code == 200) {
          this.formDia = res.data;
          this.loading = false;
        } else {
          this.$message.warning(res.msg);
          this.loading = false;
        }
      });
    },
    saveFun(type) {
      let that = this;
      that.$modal
        .confirm("是否确认保存用户数据项吗？")
        .then(function () {
          if (that.id) {
            that.editPersonnel(type);
          } else {
            that.add(type);
          }
        })

        .catch(() => {});
    },
    editPersonnel(type) {
      let data = this.form;
      data.id = this.id;
      editPersonnel(data).then((res) => {
        if (res.code == 200) {
          this.$message.success("保存成功");
          if (type == 1) {
            this.$emit("closeAddFiles");
          } else {
            this.id = "";
          }
          this.form = JSON.parse(JSON.stringify(this.formOrg));
          this.typeId = this.annexList[0].key;
          this.annexMsg = this.annexList[0].value;
          this.imageList = [];
          this.showImageList = [];
          this.srcList = [];
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    add(type) {
      let data = this.formDia;
      //需要处理数据
      add(data).then((res) => {
        if (res.code == 200) {
          this.$message.success("保存成功");
          if (type == 1) {
            this.$emit("closeAddFiles");
          }
          this.formDia = JSON.parse(JSON.stringify(this.formOrg));
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    getEventData(data) {
      console.log("页面调用addPerson");
      console.log(data);
      this.formDia = JSON.parse(JSON.stringify(this.formOrg));
      if (data) {
        let dArr = data.split("|");
        this.formDia.name = dArr[0].split(":")[1];
        this.formDia.sex = dArr[1] ? dArr[1] : "";
        this.formDia.idCard = dArr[5] ? dArr[5] : "";
        //this.form.nativePlace = dArr[4] ? dArr[4] : "";
      }
      console.log(this.formDia);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.setPageOpe();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.el-select {
  display: block;
}
</style>